.formContainer {
  width: 100%;
}

.form {
  display: flex;
  width: 100%;
  border: none;
}

.input {
  width: 100%;
  border-radius: 0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 10px 20px;
  border: none;
  outline: none;
  background-color: #424242;
  border: none;
  transition: background-color 0.3s linear;
}

.input:focus {
  transition: background-color 0.3s linear;
  background-color: #ffc700;
}

.input:focus + .submitButton {
  transition: background-color 0.3s linear;
  background-color: #ffc700;
}

.input::placeholder {
  color: #888888;
}

.submitButton {
  background-image: url('../../images/search-icon.svg');
  background-repeat: no-repeat;
  background-position: center center;
  border: none;
  outline: none;
  width: 38px;
  background-color: #424242;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s linear;
}

@media screen and (min-width: 768px) {
  .formContainer {
    width: 50%;
  }
}
